<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言墙</title>
    <link rel="icon" href="https://file.zhenghe.cn/group1/M00/A5/CB/wKge52Ze8qmADdSdAAaFL5YvofU867.ico" type="image/x-icon">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(to right, #9db5cc, #138db7);
            color: #333;
            margin: 0;
            padding: 0;
        }

        header {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            text-align: center;
            padding: 40px 0;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
        }

        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
            padding: 20px;
            background: rgba(255, 255, 255, 0.8);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }

        section {
            margin: 40px 0;
            padding: 20px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        section:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
        /* 新增的退出登录按钮样式 */
        .login-button {
            position: fixed;
            top: 0;
            right: 0;
            padding: 10px 20px;
            background-color: #93B4CF;
            color: #f8f6f6;
            border: none;
            border-radius: 0 0 0 10px;
            cursor: pointer;
            font-size: 16px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            font-weight: bold;  /* 新增这一行实现字体加粗 */
        }
        h1,
        h2 {
            border-bottom: 2px solid #7aa6d2;
            padding-bottom: 10px;
            margin-bottom: 20px;
            font-weight: normal;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 16px;
        }

        th,
        td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #d3d3d3;
            color: #696a79;
        }

        tr:hover {
            background-color: rgba(231, 228, 228, 0.99);
        }

        button {
            margin-left: 10px;
            padding: 5px 10px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            color: white;
            transition: background-color 0.3s, transform 0.3s;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .styled-button {
            background-color: #1e90ff;
            font-size: 20px;
            padding: 10px 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
            color: #f3f5f6;
            transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
        }

        .styled-button:hover {
            background-color: #1e90ff;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .input-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        #searchInput {
            width: 100%;
            padding: 10px;
            border: 2px solid #1e90ff;
            border-radius: 5px;
            font-size: 16px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* 新增的置顶样式 */
        .top-message {
            background-color: #6BA3C6;
            color: white;
            font-weight: bold;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            margin-bottom: 10px;
        }

        li.top-message::after {
            content: "置顶";
            color: #f3f3f3;
            font-weight: bold;
            margin-left: 10px;
        }

        /* 新增的图片样式 */
        img {
            max-width: 100%;
            height: auto;
        }

        .edit-button {
            background-color: #4790FF;
        }

        .delete-button {
            background-color: #d06262;
        }
    </style>
</head>

<body>
<header>
    <h1>留言墙</h1>
    <p style="background: #c54f4f;  display: inline-block;">----管理员操作界面----</p>
</header>
<div class="container">
    <section id="messages">
        <br>
        <div class="input-container">
            <input type="text" id="searchInput" onkeyup="filterMessages()" placeholder="搜索留言...">
<!--            <input type="submit" value="→  去留言" onclick="gotoMes()" class="styled-button">-->
        </div>
        <table id="messageTable">
            <thead>
            <tr>
                <th>留言者</th>
                <th>邮箱</th>
                <th>留言时间</th>
                <th>留言内容</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="messageList">
            <!-- 留言列表将由 JavaScript 动态填充 -->
            </tbody>
        </table>
    </section>
</div>

<!-- 新增的退出登录按钮 -->
<button class="login-button" onclick="logout()">
    <script>
        var username = localStorage.getItem('username');
        if (username) {
            document.write(username);
        } else {
            document.write('登录');
        }
    </script>
</button>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var token = localStorage.getItem('token');
        if (token!== 'admin123' || token === null) {
            window.location.href = './login';
        } else {
            fetchMessages();
        }
    });

    function gotoMes() {
        window.location.href = './addMes';
    }

    function filterMessages() {
        const input = document.getElementById('searchInput');
        const filter = input.value.toLowerCase();
        const tbody = document.getElementById('messageList');
        const rows = tbody.getElementsByTagName('tr');

        for (let i = 0; i < rows.length; i++) {
            const name = rows[i].getAttribute('data-name');
            const email = rows[i].getAttribute('data-email');
            const message = rows[i].cells[2].innerHTML.toLowerCase();
            const time = rows[i].cells[3].innerHTML.toLowerCase();
            if (name.toLowerCase().indexOf(filter) > -1 || email.toLowerCase().indexOf(filter) > -1 || message.indexOf(filter) > -1 || time.indexOf(filter) > -1) {
                rows[i].style.display = '';
            } else {
                rows[i].style.display = 'none';
            }
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        fetchMessages();
    });

    function fetchMessages() {
        fetch('./mesList', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                const messageList = document.getElementById('messageList');
                messageList.innerHTML = '';
                data.forEach(message => {
                    const tr = document.createElement('tr');
                    tr.setAttribute('data-name', message.name);
                    tr.setAttribute('data-email', message.email);

                    const nameCell = document.createElement('td');
                    nameCell.textContent = message.name;

                    const emailCell = document.createElement('td');
                    emailCell.textContent = message.email;

                    const timeCell = document.createElement('td');
                    timeCell.textContent = new Date(message.createTime).toLocaleString();

                    const messageCell = document.createElement('td');
                    messageCell.textContent = message.message;


                    const buttonCell = document.createElement('td');

                    const editButton = document.createElement('button');
                    editButton.textContent = '修改';
                    editButton.className = 'edit-button';
                    editButton.onclick = () => editMessage(message.id, message.message);

                    const deleteButton = document.createElement('button');
                    deleteButton.textContent = '删除';
                    deleteButton.className = 'delete-button';
                    deleteButton.onclick = () => deleteMessage(message.id);

                    buttonCell.appendChild(editButton);
                    buttonCell.appendChild(deleteButton);

                    tr.appendChild(nameCell);
                    tr.appendChild(emailCell);
                    tr.appendChild(timeCell);
                    tr.appendChild(messageCell);
                    tr.appendChild(buttonCell);
                    if (message.istop == 1) {
                        tr.classList.add('top-message'); // 添加置顶 类
                    }
                    messageList.appendChild(tr);

                    // 新增的图片显示逻辑
                    if (message.imagePath) {
                        const img = document.createElement('img');
                        img.src = message.imagePath;
                        tr.appendChild(img);
                    }
                });
            })
            .catch(error => {
                console.error('Error fetching messages:', error);
            });
    }

    function editMessage(id, currentMessage) {
        const newMessage = prompt('修改留言:', currentMessage);
        if (newMessage!== null && newMessage!=='') {
            fetch(`./update`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ id, message: newMessage })
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    location.reload();  // 刷新页面
                })
                .catch(error => {
                    console.error('Error updating message:', error);
                });
        }
        location.reload();
    }

    function deleteMessage(id) {
        if (confirm('确定要删除这条留言吗？')) {
            fetch(`./delete?id=${id}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.text();
                })
                .then(data => {
                    fetchMessages();  // 刷新留言列表
                    alert('留言删除成功');
                })
                .catch(error => {
                    console.error('Error deleting message:', error);
                    alert('删除留言时出错，请稍后再试。');
                });
        }
    }
    //新增的退出登录函数
    function logout() {
        var username = localStorage.getItem('username');
        if (username) {
            var result = confirm('是否退出登录?');
            if (result) {
                localStorage.clear("token");
                localStorage.clear("username");
                location.reload();
            }
        }else{
            gotoLogin()
        }
    }
    function gotoLogin() {
        // 这里可以添加跳转到注册页面的逻辑
        window.location.href = './login';
    }
</script>
</body>

</html>
